<template>
	<view>
		<view class="daycons">
			<view class="zltap">
				<image :src="img_src+'bg1@2x.png'"></image>
				<scroll-view class="daytxt" :scroll-into-view="'id'+((cur==0||cur==1)?'':cur)" :scroll-with-animation="true" scroll-x>
					<view class="itemtxt" @tap="swidths(0)" :id="'id'+0" :class="0==cur?'activez':''" >
						<span>男士</span>
					</view>
					<view class="itemtxt" @tap="swidths(1)" :id="'id'+1" :class="1==cur?'activez':''" >
						<span>女士</span>
					</view>
				</scroll-view>
			</view>
			<!-- 预约日期 -->
			<view class="zplist">
				<view class="zplist1" v-for="(item,index) in 6" :key="index" @click="jump(0,'中长烫染发')">
					<image :src="img_src+'zpimg'+(index+1)+'.png'" mode="widthFix"></image>
					<view>中长烫染发</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	var util = require('../utils/util.js');
	export default {
		props: {
			
		},
		data() {
			return {
				img_src: app.globalData.img_src,
				img_urls: app.globalData.img_urls,
				date:[],
				cur:0,
			}
		},
		onLoad: function() {
			var that = this;
		},
		created() {
			
		},
		mounted: function() {
			// 处理小程序 attached 生命周期
			this.attached();
		},
		methods: {
			attached: function(){
				
			},
			jump(id,name){
				uni.navigateTo({
					url:'/subcontract/Moreworks/Moreworks?id='+id+"&name="+name+"&type=0"
				})
			},
			swidths(cur){
				this.cur = cur
				this.$emit('swidths', {
				    cur: cur
				});
			},
		}
	}
</script>

<style scoped lang='scss'>
	.zplist1>view{
		width: 100%;
		height: auto;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		line-height: 60rpx;
		text-align: center;
	}
	.zplist1>image{
		width: 210rpx;
		height: 210rpx;
		border-radius: 10rpx;
	}
	.zplist1{
		width: 210rpx;
		height: auto;
		margin-right: 35rpx;
		margin-bottom: 16rpx;
		display: inline-block;
		float: left;
	}
	.daycons{
		width: 100%;
		height: auto;
		display: table;
		padding-top: 36px;
		background: url($IMG_URL+'bjtxt1.jpg')no-repeat;
		background-size: 100% auto;
		
	}
	.zplist>view:nth-child(3n){
		margin-right: 0px !important;
	}
	.zplist{
		width: 700rpx;
		background-color: #fff;
		min-height: 300px;
		display: table;
		margin-left: 25rpx;
		box-sizing: border-box;
		margin-top: 20px;
		padding-bottom:50px;
	}
	.activez{
		background-color: #fff;
	    border-top-right-radius: 25rpx;
	    border-top-left-radius: 25rpx;
	}
	.activez>span{
		color: #eb613d !important;
	}
	.activez>span:nth-child(1){
		font-size: 42rpx !important;
		font-weight: 300 !important;
	}
	.itemtxt>span:nth-child(1){
		margin-top: 10px;
	}
	.itemtxt>span{
		display: table;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		margin-bottom: 4px;
		width: 100%;
		height: auto;
	}
	.itemtxt{
		width:161.25rpx;
		height: 100rpx;
		display: inline-block;
	}
	.daytxt{
		width: 725rpx;
		height: auto;
		display: flex;
		overflow: hidden;
		white-space: nowrap;
		position: absolute;
		bottom: 0px;
		left:25rpx;
	}
	.zltap>image{
		width: 100%;
		height: 160rpx;
	}
	.zltap{
		width: 100%;
		height: auto;
		display: table;
		position: relative;
	}
</style>
